<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="@/static/img/back.png"></image>
				</view>
				<view class="title">等级权益</view>
				<view class="text" @click="signin()">签到</view>
			</view>
		</view>
		<image class="top_bg" src="@/static/img/level_bg.png" mode="widthFix"></image>

		<view class="imgs">
			<scroll-view scroll-x="true" @scroll="scroll">
				<image v-for="item in imagelist" :src="item" mode="widthFix"></image>
			</scroll-view>
		</view>

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="title">等级特权</view>
			<view class="lv">
				<view class="l_item">
					<image src="@/static/img/lv_icon1.png" mode="widthFix"></image>
					<view class="num">LV.0</view>
					<view class="text">公屏勋章</view>
				</view>
				<view class="l_item">
					<image src="@/static/img/lv_icon2.png" mode="widthFix"></image>
					<view class="num">50%</view>
					<view class="text">社交值加成</view>
				</view>
				<view class="l_item">
					<image src="@/static/img/lv_icon3.png" mode="widthFix"></image>
					<view class="num">0%</view>
					<view class="text">兑换KT</view>
				</view>
				<view class="l_item">
					<image src="@/static/img/lv_icon4.png" mode="widthFix"></image>
					<view class="num">0</view>
					<view class="text">级别礼包</view>
				</view>
			</view>
			<view class="info">
				<view class="i_item i_left">
					<image src="@/static/img/lv_left.png" mode="widthFix"></image>
					<view class="i_l_text">
						<view>0.00</view>
						<view>我的社交值</view>
					</view>
					<view class="i_btn" @click="more()">查看更多</view>
				</view>
				<view class="i_item i_right">
					<image src="@/static/img/lv_right.png" mode="widthFix"></image>
					<view class="i_l_text">
						<view>0人</view>
						<view>我的团队</view>
					</view>
					<view class="i_btn" @click="invite()">立即邀请</view>
				</view>
			</view>
			<view class="title">等级特权</view>
			<view class="hint">社交值长期有效，兑换后销毁</view>
			<view class="time">
				<image src="../../static/img/lv_img3.png" mode="widthFix"></image>
				<view>完成任务获得社交值</view>
				<view><text>0.00/</text>21.00</view>
			</view>
			<view class="task">
				<image src="../../static/img/lv_img1.png" mode="widthFix"></image>
				<view class="task_text">
					<view>每日活跃<text>(0/20)</text></view>
					<view>今日可获得<text>+0/20</text></view>
				</view>
				<view class="task_btn">0/20</view>
			</view>
			<view class="task">
				<image src="../../static/img/lv_img2.png" mode="widthFix"></image>
				<view class="task_text">
					<view>每日签到</view>
					<view>今日可获得<text>+1.00</text></view>
				</view>
				<view class="task_btn">签到</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				imagelist: [
					'../../static/img/v0.png',
					'../../static/img/v1.png',
					'../../static/img/v2.png',
					'../../static/img/v3.png',
					'../../static/img/v4.png',
					'../../static/img/v5.png',
					'../../static/img/v6.png',
					'../../static/img/v7.png',
					'../../static/img/v8.png',
					'../../static/img/v9.png',
					'../../static/img/v10.png',
				],
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			invite() {
				uni.navigateTo({
					url: '/pages/me/invite'
				})
			},
			record() {
				uni.navigateTo({
					url: '/pages/me/rechargeRecord'
				})
			},
			more() {
				uni.navigateTo({
					url: '/pages/me/socialContact'
				})
			},
			signin() {
				uni.navigateTo({
					url: '/pages/me/signin'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		position: relative;
		overflow: hidden;
		height: 100vh;
		background-size: 100% 100%;
	}

	.head {
		position: fixed;
		z-index: 1;
		width: 100%;
		background: transparent;

		.head-np {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 96rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.back {
				image {
					width: 20rpx;
					height: 37rpx;
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #E7C9B1;
			}

			.text {
				color: #E7C9B1;
				font-size: 30rpx;
			}
		}
	}

	.top_bg {
		width: 100%;
		// position: absolute;
		// top: 0;
		// left: 0;
	}

	.imgs {
		width: 100vw;
		height: 230rpx;
		position: absolute;
		top: 0;
		left: 0;
		white-space: nowrap;
		// position: relative;
		margin-top: 176rpx;

		image {
			margin-right: 30rpx;

			&:nth-of-type(1) {
				margin-left: 50rpx;
			}
		}
	}

	.lv {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;

		.l_item {
			text-align: center;

			image {
				width: 84rpx;
				margin: 0 auto;
				display: block;
			}

			.num {
				font-weight: 500;
				font-size: 30rpx;
				margin: 20rpx 0 10rpx;
			}

			.text {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.i_item {
			width: 330rpx;
			height: 144rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 330rpx;
			}

			.i_l_text {
				position: relative;
				text-align: left;
				margin-left: 30rpx;

				view {
					&:nth-of-type(1) {
						font-weight: 500;
						font-size: 38rpx;
					}

					&:nth-of-type(2) {
						font-size: 28rpx;
						color: #666666;
						margin-top: 12rpx;
					}
				}
			}

			.i_btn {
				position: relative;
				width: 117rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				margin-right: 16rpx;
				text-align: center;
			}
		}

		.i_left .i_btn {
			background: #FDC465;
		}

		.i_right .i_btn {
			background: #7AB2FF;
		}
	}

	.main {
		// margin-top: 176rpx;
		position: relative;
		margin-top: -80rpx;
		z-index: 888;
		border-radius: 24rpx;
		overflow: hidden;
		height: inherit;
		background: #FFFFFF;
		border-radius: 22rpx;
		padding: 0 30rpx;

		.title {
			font-weight: 500;
			font-size: 34rpx;
			text-align: left;
			margin-top: 40rpx;
		}

		.hint {
			font-size: 26rpx;
			color: #999999;
			margin-top: 14rpx;
		}

		.time {
			height: 83rpx;
			background: #EAF3FF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 40rpx;

			image {
				width: 50rpx;
				margin: 0 20rpx 0 30rpx;
			}

			view {
				&:nth-of-type(1) {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				&:nth-of-type(2) {
					text {
						color: #63A5FF;
					}
					margin-right: 20rpx;
				}
			}
		}

		.task {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			image {
				width: 50rpx;
				margin-right: 20rpx;
			}

			.task_text {
				flex: 1;
				view {
					&:nth-of-type(1) {
						text {
							color: #666666;
							font-size: 26rpx;
						}
					}
					&:nth-of-type(2) {
						font-size: 26rpx;
						color: #666666;
						margin-top: 6rpx;
						text {
							color: #3F93FF;
							font-size: 26rpx;
						}
					}
				}
			}
			.task_btn {
				width: 154rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-weight: 500;
				text-align: center;
				font-size: 26rpx;
				color: #FFFFFF;
				background: #3F93FF;
				border-radius: 32rpx;
			}
		}
	}
</style>